<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>订单查询</title>
    <link
        rel="stylesheet"
        href="./style/common.css"
    >
    <link
        rel="stylesheet"
        type="text/css"
        href="https://www.layuicdn.com/layui-v2.8.0/css/layui.css"
    />
    <link
        rel="stylesheet"
        href="./style/orders.css"
    >
</head>

<body>
    <section class="page_heart">
        <div class="search_box">
            <input
                id="keyowords"
                type="text"
                name="title"
                required
                lay-verify="required"
                placeholder="输入您的订单编号查询"
                autocomplete="off"
                class="layui-input"
            >
            <i class="layui-icon layui-icon-search"></i>
        </div>

        <div class="pc_table">
            <table
                id="demo"
                lay-filter="test"
            ></table>
        </div>
        <div class="mobile_list">
            <div>
                <div class="label">订单编号</div>
                <div
                    class="value"
                    id="val1"
                ></div>
            </div>
            <div>
                <div class="label">开始时间</div>
                <div
                    class="value"
                    id="val2"
                ></div>
            </div>
            <div>
                <div class="label">订单金额</div>
                <div
                    class="value"
                    id="val3"
                ></div>
            </div>
            <div>
                <div class="label">订单状态</div>
                <div
                    class="value"
                    id="val4"
                    style="color:red"
                ></div>
            </div>
            <div>
                <div class="label">预计完成时间</div>
                <div
                    class="value"
                    id="val5"
                ></div>
            </div>
        </div>
    </section>


    <!-- body 末尾处引入 layui -->
    <script src="https://www.layuicdn.com/layui-v2.8.0/layui.js"></script>
    <script>
        layui.use(function () {
            var layer = layui.layer
                , table = layui.table;

            //输出版本号


            lay('#keyowords').on('keydown', (e) => {
                if (event.keyCode === 13) { // 判断是否按下回车键
                    console.log('e :>> ', e.target.value);
                    table.reload('demo', {
                        where: { //设定异步数据接口的额外参数，任意设
                            aaaaaa: 'xxx'
                            , bbb: 'yyy'
                            //…
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                }
            })

            table.render({
                elem: '#demo'
                , height: 312
                , url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
                , page: false //开启分页
                , cols: [[ //表头
                    { field: 'id', title: '订单编号', }
                    , { field: 'startTime', title: '开始时间', }
                    , { field: 'money', title: '订单金额', }
                    , { field: 'status', title: '订单状态', }
                    , { field: 'sign', title: '签名', }
                    , { field: 'preTime', title: '预计完成时间', }
                ]],
                done: (res) => {
                    console.log('鸡你太美 :>> ', res);
                    // 无数据展示
                    // if (res.count == 0) {
                    //     lay(".layui-table-main").html(
                    //     `
                    //     <div class="layui-none">
                    //         <img src="./images/none.png" />
                    //         <p>
                    //             暂无数据
                    //         </p>
                    //     </div>
                    //     `
                    // );
                    // }
                },
                error: (res) => {
                    console.log('鸡你太美 :>> ', res);

                    lay('#val1').html('鸡你太美');
                    lay('#val2').html('鸡你太美');
                    lay('#val3').html('鸡你太美');
                    lay('#val4').html('鸡你太美');
                    lay('#val5').html('鸡你太美');
                    lay('#val6').html('鸡你太美');
                    lay(".layui-table-main").html(
                        `
                        <div class="layui-none">
                            <img src="./images/none.png" />
                            <p>
                                暂无数据
                            </p>
                        </div>
                        `
                    );

                }
            });

        });
    </script>
</body>

</html>